<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
    <style>
      .active {
        width: 200px;
        height: 200px;
        background: red;
      }
      .show {
        display: block;
      }
      .hide {
        display: none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="li1">1</li>
      <li>2</li>

      <li>3</li>
      <li>4</li>
    </ul>
  </body>
  <script>
    let str = `<div>111</div>`;
    document.querySelector('ul').children[0].innerHTML = str;
    // $(function () {
    //   let lis = $('ul li');
    //   console.log(lis[0]);
    //   lis.each((index, item) => {
    //     console.log(item);
    //     console.log($(item));
    //   });
    //   console.log(lis);
    // });
    // let lis = document.querySelectorAll('ul li');
    // console.log(lis[0]);
    // lis[0].classList.add('active');
    // console.log(lis[0].parentElement.classList.add('hide'));
    // console.log(lis[0].parentElement.children[0].classList.add('active'));
    // let li1 = document.querySelector('.li1');
    // console.log(li1.nextSibling.nextSibling);
    // $('ul').children()[0].classList.add('active');
    // console.log(lis[0].previousSibling);
  </script>
</html>
